<!DOCTYPE html>
{% load i18n %}
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
    {% include '../show/link.html'%}
    <title> {%trans '登录' %}</title>
    <style>
        .f-fl{float:left;}
        .f-fr{float:right;}
            .errorlist {
                color: red;
            }
        @media only screen and (max-width: 479px)
        {
            .login-form-box{
                text-align: center;
                margin: 0 auto;
                width: 100%!important;

            }
            .login-header{
                height: 0px!important;
            }
            .login_footer_blank{
                height: 0px!important;
            }

            .head_mobile {
                display:None
            }
            .footer_mobile {
                display:None
            }
            .login-form .form-group{
                margin: 20px 40px  0 40px!important;
                position: relative;
                background-color: #fff;
            }
        }

        .login-box {background-image: URL("/static/images/login_ic_bg3.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size:100% 100%;
        height:100%;
        }

        .login_footer_blank {
            height:315px;
        }



        .login-header{
            height: 226px;
        }
        .login-form-box{
            text-align: center;
            margin: 0 auto;
            width: 508px;
        }
        .login-form-box .login-form{
            background: url("/static/images/login_ic_bg.png") no-repeat;
            padding-bottom: 64px;
        }
        .login-form .login-header-img{
            margin-top: 35px;
            width: 65px;
            height: 65px;
        }
        .login-form .heading{
            display: block;
            font-size: 16px;
            font-weight: 500;
            color: #00b4ef;
            padding: 10px 0 0 0;
        }
        .login-form .form-group{
            margin: 20px 104px  0 104px;
            position: relative;
            background-color: #fff;
        }

        .login-form .form-control{
            background-color: #fff;
            background-image: url("/static/images/login_ic_line.png");
            background-repeat: no-repeat;
            background-size:auto 42px;
            background-position:40px -1px;
            border: none;
            box-shadow: none;
            padding: 0 0 0 58px;
            height: 40px;
            border:1px solid #e5e5e5;
            border-radius:2px;
        }
        .login-form .form-control:focus{
            border:1px solid #00b4ef;
            box-shadow: 0 0 1px #00b;
        }
        .f-username:before{
            content: url("/static/images/login_ic_user.png");
            width: 16px;
        }
        .f-password:before{
            content: url("/static/images/login_ic_lock.png");
            width: 16px;
        }
        .login-form .form-group i{
            position: absolute;
            top: 11px;
            left: 13px;
            font-size: 17px;
            color: #c8c8c8;
            transition: all 0.5s ease 0s;
        }
        .login-form .btn{
            font-size: 16px;
            color: #fff;
            background: #00b4ef;
            border-radius: 2px;
            padding: 9px 25px;
            border: none;
            text-transform: capitalize;
            transition: all 0.5s ease 0s;
        }
        .login-form div.form-btn{
            margin-top:0px;
        }
        .login-msg-box{
            min-height: 40px;
        }

        .login-msg-box .errorlist,.login-msg-box .errorlist li{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .login-msg-box .errorlist{
            padding-top:10px;
            text-align: left;
        }
        .login-msg-box .errorlist li{
            font-size: 12px;
            color: #ee2c89;
        }
        .login-form div.login-form-link,.login-form div.login-form-link a{
            margin-top: 12px;
            font-size: 12px;
            color: #a9a9a9;
        }
        .login-form-link span a.login-form-register{
            color: #6ac7ff;
        }
    </style>
</head>

<body>
<div class="head_mobile">
{% include '../show/top_bar.html' %}
</div>

<!-- todo 安全验证码 -->
<div class="row login-box">
    <div class="login-header">
    </div>
    <div class="container" sytle="background: #EEEEE;">
        <div class="login-form-box">
            <form class="login-form" action="{% url 'users:login' %}" method="post">
                {% csrf_token %}
                <a  href="{% url 'index' %}">
                <img class="login-header-img" src="/static/images/login_ic_head.png">
                <span class="heading">NBEX.COM{%trans '登录' %}</span>
                </a>
                <div class="form-group">
                    <input type="text" class="form-control" name="username" autofocus maxlength="254" id="id_username" placeholder="{%trans '手机号码/邮件账号' %}"/>
                    <i class="f-username"></i>
                </div>
                <div class="form-group help">
                    <input type="password" class="form-control password" name="password" required id="id_password" placeholder="{%trans '请输入密码' %}"/>
                    <i class="f-password"></i>
                </div>
                <div class="form-group form-btn">
                    {% for field in form %}
                    {% if field.help_text %}
                    <p class="help text-small text-muted">{{ field.help_text|safe }}</p>
                    {% endif %}
                    {% endfor %}
                    <div class="login-msg-box">
                        {{ form.non_field_errors }}
                    </div>
                    <input type="hidden" name="next" value="{{ next }}"/>
                    <button type="submit" class="btn btn-default btn-block">{%trans '登录' %}</button>
                </div>
                <div class="form-group login-form-link">
                    <span class="f-fl ">{%trans '没有账号？' %}<a class="login-form-register" href="{% url 'users:register' %}">{%trans '立即注册' %}</a></span>
                    <span class="f-fr"><a href="{% url 'users:password_reset' %}">{%trans '忘记密码？' %}</a></span>
                    <div style="clear: both;"></div>
                </div>
            </form>
        </div>
    </div>
    <div class="login_footer_blank">
    </div>

    <div class="footer_mobile">
    {% include '../show/footer.html' %}
    </div>

    <script>
        $(".new-top-fix").addClass("header-bg-img").removeClass("nav-default");
        $(".new-top-fix").addClass("header-positsion");
        $('.lang').hover(
            function(){$('.lanague').addClass('selected');},
            function () {$('.lanague').removeClass('selected');}
        );


        function UrlSearch()
        {
           var name,value;
           var str=location.href; //取得整个地址栏
           var num=str.indexOf("?")
           str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

           var arr=str.split("&"); //各个参数放到数组里
           for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
             name=arr[i].substring(0,num);
             value=arr[i].substr(num+1);
             this[name]=value;
             }
            }
        }
        var Request=new UrlSearch(); //实例化
        var message=Request.message;
        if (message && message == "register")
        {
            msg_tips("<b>{% trans '<h3>注册成功</h3><br>请到邮箱点击激活邮件' %}</b>", 5000);
        }

    </script>
</body>
</html>
